import { toThousands } from '@/utlis/utlis'
import React, { FC } from 'react'
import styled from "styled-components"
interface IFullCount {
    num:string,
    unit:string,
    title:string
}

const Count = styled.div`
        flex: 1;
        padding-top: 2rem;
        display:flex;
        font-size: 1.4rem;
        color: #fff;
        align-items: center;
        justify-content: center;
        background-color: rgba(6,31,79,.5);
        span{
          position: relative;
          top:-0.5rem;
          font-size: 3rem;
          font-weight: bold;
          margin: 1rem;
          color:#00F6FF;
        } 
` 

const Content: FC<IFullCount> = function (props) {

    return (
        <Count>{props.title}:<span>{toThousands(props.num)}</span> {props.unit}</Count>
    )
}

export default Content
